<template>
  <div class="card">
    <img :lazy-load="true" v-if="active === 1" :src="picPre + item.img" alt="">
    <img :lazy-load="true" v-else :src="picPre + item.thumb" alt="">
    <div class="content" @tap="showModal">
      <div v-if="active === 1">
        <div class="integralTitle">
            <span>{{item.title}}</span>
            <p class="balance">
              <img :lazy-load="true" class="iconfont" src="https://test.hrycf.com/front/balance.png" alt="">{{item.integral}}</p>
        </div>
        <span> 奖励{{item.integral}}积分</span>
      </div>
      <div v-else>
        <div class="title">
          <p>{{item.title}}</p>
        </div>
        <span>{{item.integral}}积分</span>
      </div>
      <div v-if="active === 1" class="lefticon">
        <p v-if="item.status === '1'">未完成</p>
        <p v-else style="color: #77E6BC">已完成</p>
      </div>
      <div class="dui" v-else ﻿@tap="goPage(item.id)">
        兑换 <span class="dui iconfont iconyou"></span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "card",
    props: {
      item:{
        type: Object
      },
      active: {
        type: Number,
        default: 1
      },
    },
    data(){
      let that = this;
      return{
        picPre: that.$api.picPre,
      }
    },
    methods: {
		showModal(){
			if(this.active !== 1){
				return false
			}
			uni.showModal({
			  title: this.item.title,
			  content: this.item.describe,
			  showCancel: false,
			  confirmText: '知道了'
			})
			
		},
      goPage(id) {
		  uni.navigateTo({
		  	url: '/activity/detail?id='+id
		  })
      }
    }
  }
</script>

<style scoped>
  .card {
    font-size: 0;
    padding: 29rpx 0 0 19rpx;
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
   
  }

  .content {
    padding-bottom: 29rpx;
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    border-bottom: 1rpx solid rgba(238, 238, 238, 1);
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  img {
    width: 46rpx;
    height: 46rpx;
    margin-right: 27rpx;
    border-radius: 50%;
  }
  .title{
    display: flex;
  }
  .title>p:first-child {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(50, 50, 50, 1);
    line-height: 30rpx;
    margin-bottom: 9rpx;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    width: 400rpx;
  }

  span {
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(150, 150, 150, 1);
    line-height: 20rpx;
  }

  .balance {
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(238, 139, 41, 1);
    display: flex;
    align-items: center;
  }

  .iconfont {
    width: 29rpx;
    height: 28rpx;
    margin: 0 10rpx;
  }


  .dui {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #EF5A56;
  }
  .integralTitle{
    display: flex;
    align-items: center;
  }
.integralTitle>span{
  color: #323232;
  font-size: 30rpx;
  font-weight:500;
  line-height: 30rpx;
  margin-bottom: 10rpx;
}
  .lefticon{
    color: #EF5A56;
    font-size: 24rpx;
    font-weight:500;
    margin-right: 10rpx;
  }
</style>
